<template>
  <el-container>
    <el-header>
      <el-row :gutter="10">
        <el-col :span="8" class="header-font header-font-name">
          <span style="font-size: 60px">邬</span>
          <span><sub>魉</sub></span>
        </el-col>
        <el-col :offset="14" :span="2" class="header-font header-font-name">
          <el-row :gutter="5" class="wu-login-login-time">
            <el-col :span="6">{{ currentTime.getHours() }}</el-col>
            <el-col :span="3">:</el-col>
            <el-col :span="6">{{ currentTime.getMinutes() }}</el-col>
            <el-col :span="3">:</el-col>
            <el-col :span="6">{{currentTime.getUTCSeconds()}}</el-col>
          </el-row>
        </el-col>
        <!--{{ currentTime.getFullYear() }}年{{ currentTime.getMonth() }}月{{ currentTime.getDate() }}日 -->
      </el-row>
    </el-header>
    <el-main class="wl-login-main">
      <transition name="el-zoom-in-center">
        <el-container v-show="showContainer">
          <el-card class="el-mian wl-login-card el-col-offset-9" shadow="never">
            <el-form class="wl-login-form">
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="账号：" label-width="70px" prop="username">
                    <el-input autocomplete="off" v-model="loginUser.username" class="el-col el-col-6"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="密码：" label-width="70px" prop="password">
                    <el-input type="password" autocomplete="off" v-model="loginUser.password" class="el-col el-col-6"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="验证码：" label-width="70px" prop="verifyCode">
                    <el-input autocomplete="off" v-model="loginUser.verifyCode" class="el-col el-col-6">
                      <el-image style="height: 32px; width: 57px; color: black" slot="append" fit="scale-down"
                                :src="verifyImg" @click="getVerifyImg()"/>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <el-aside width="100px" class="wl-login-button-aside">
            <el-button type="primary" size="medium" round @click="toLogin()">登 录</el-button>
          </el-aside>
        </el-container>
      </transition>
    </el-main>
  </el-container>
</template>

<script>

  export default {
    name: "login",
    data() {
      return {
        loginUser: {
          username: "",
          password: "",
          verifyCode: ""
        },
        verifyImg: "",
        showContainer: false,
        currentTime: new Date(),
        rules: {
          username: {
            // validator:
          }
        }
      }
    },
    mounted: function () {
      let that = this
      this.getVerifyImg()
      setTimeout(() => {
        that.currentTime = new Date()
      }, 1000);
    },
    watch: {
      currentTime() {
        let that = this
        setTimeout(() => {
          that.currentTime = new Date()
          console.log(that.currentTime)
        }, 1000);
        setTimeout(() => {
          that.showContainer = true
        }, 1000 * 3)
      }
    },
    methods: {
      getVerifyImg() {
        let that = this
        this.$request.post('/api/author/author/getCodeImg', {}).then(res => {
          that.verifyImg = res
        })
      },
      toLogin() {
        let that = this
        this.$request.post('/api/author/author/toLogin', {
          'userUsername': that.loginUser.username,
          'userPassword': that.loginUser.password,
          'verifyCode': that.loginUser.verifyCode,
        }).then(res => {
          sessionStorage.setItem("token", res.token)
          that.$router.push('/')
        })
      }
    }
  }
</script>

<style>
  .header-font {
    height: 100%;
    font-size: 35px;
    font-family: 'Adobe 宋体 Std L', cursive;
    text-align: left;
    color: rgb(232, 228, 228);
  }

  .el-zoom-in-center-enter-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .el-zoom-in-center-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .wl-login-main {
    margin-top: 10%;
  }

  .wl-login-card {
    width: 23%;
    background-color: rgba(0, 0, 0, 0);
    border: none;
  }

  .wl-login-main .el-card__header {
    border: none !important;
  }

  .wu-login-login-time {
    height: 100%;
    font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
    font-size: 20px;
    color: snow;
    margin-top: 20%;
    /*color: rgba(0, 255, 234, 0.89);*/
  }

  .wl-login-form input {
    background-color: #efefef8a;
  }

  .wl-login-form .el-form-item__label {
    color: #98faff;
  }

  .wl-login-form .el-image__error {
    color: #928f8f;
    background-color: #efefef8a;
  }

  .wl-login-button-aside {
    padding: 10px;
    overflow: hidden;
  }

  .wl-login-button-aside > button {
    height: 70%;
    font-size: large;
    writing-mode: vertical-rl;
    line-height: 20px;
    justify-content: center;
    margin: 20% 0;
  }
</style>
